<%--
  Created by IntelliJ IDEA.
  User: guozhenpeng
  Date: 2020/12/9
  Time: 18:30
  To change this template use File | Settings | File Templates.
--%>

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<c:set var="path" value="${pageContext.request.contextPath}"/>
<%String path = request.getContextPath();%>

<!DOCTYPE html>
<html lang="en" >

<head>
    <meta charset="UTF-8">
    <title>CodePen - [007] Responsive LogIn</title>

    <link rel="stylesheet" href="${path}/static/css/style.css">

    <!--图标库  可无视-->
    <script src="https://kit.fontawesome.com/c0078485ae.js" crossorigin="anonymous"></script>
    <script type="text/javascript" src="${path}/static/js/jquery-3.5.1.min.js"></script>

</head>
<body>

<img src="${path}/static/img/wave-01.png" alt="" class="wave">
<div class="container">
    <div class="img">
        <img src="${path}/static/img/phone.png" alt="">
    </div>
    <div class="login-container">
        <form class="form-login" action="${path}/login" id="myfrom" method="post">
            <input type="hidden" name="referer" value="${empty(param.referer)?header.referer:param.referer}"/>
            <img class="avatar" src="${path}/static/img/profile.png" alt="">
            <h2>会员登录</h2>
            <div class="input-div one">
                <div class="i">
                    <i class="fas fa-user"> </i>                    </div>
                <div>

                    <input placeholder="用户名" class="input" type="text" id="username" name="username">

                </div>
                <span class="pull-left l-5 info fc999" style="width:200px; auto_margin: 0;  " id="usernameImg"></span>

            </div>
            <div class="input-div pass">
                <div class="i">
                    <i class="fas fa-lock"> </i>                    </div>
                <div class="div">

                    <input placeholder="密码" class="input" type="password"id="password"name="password">


                </div>
                <c:if test="${param.msg eq 'erro'}">
                    <span class="pull-left l-5 info fc999" style="width:200px; auto_margin: 0;  " id="passwordImg">用户名或密码错误</span>
                </c:if>
                <span class="pull-left l-5 info fc999" style="width:200px; auto_margin: 0;  " id="passwordImg"></span>
            </div>
            <div class="input-div pass">
                <div class="i">
                    <i class="fas fa-lock"> </i>                    </div>
                <div class="div">


                    <img src="${path}/code">
                    <input placeholder="验证码" class="input" type="password" id="code" name="code">


                </div>
                <c:if test="${param.msg eq 'code'}">
                    <span class="pull-left l-5 info fc999" style="width:200px; auto_margin: 0;  " id="passwordImg">验证码错误</span>
                </c:if>
                <span class="pull-left l-5 info fc999" style="width:200px; auto_margin: 0;  " id="codeImg"></span>
            </div>
            <input type="checkbox" checked="checked" style="_width: 20px;_margin: 0;"/>
            <span class="pull-left l-5 info fc999" style="_width: auto;_margin: 0;" name="rememberMe">下次自动登录
            <input type="button" class="btn" id="but" value="登录">
            <a href="#">忘记密码?</a>

        </form>
    </div>
</div>

<script  src="${path}/static/js/script.js"></script>

</body>
</html>
<script type="text/javascript">
    $(function () {
        $(".btn").click(function () {

            if($("#username").val()==""||$("#username").val()==null)
            {

                $("#usernameImg").html("不能输入空的用户名")
                return;
            }
            else{
                $("#usernameImg").html("")
            }
            if($("#password").val()==""||$("#password").val()==null)
            {

                $("#passwordImg").html("不能输入空的密码")
                return;
            }
            else{
                $("#passwordImg").html("")
            }
            if($("#code").val()==""||$("#code").val()==null)
            {

                $("#codeImg").html("不能输入空的验证码")
                return;
            }
            else{
                $("#codeImg").html("")
            }
            $("#myfrom").submit();
        })
    })


</script>